<template>
  <!-- <div class="demo-project-sidebar-wrapper flex-justify-between">
    <div>
    <router-link
      v-for="item in options"
      :key="item.key"
      :to="item.path"
      :class="{
        'menu-item': true,
        selected: selectedRoute(item),
      }"
    >
      <a-tooltip :title="item.label" placement="right">
        <Icon class="fz20" style="width: 50px;" :icon="item.icon"/>
      </a-tooltip>
    </router-link>
    </div>
    <div class="mb20 flex-display flex-column flex-align-center flex-justify-between">
      <a-tooltip title="Back to home" placement="right">
        <a @click="goHome"> <Icon icon="ImportOutlined" style="font-size: 22px; color: white"/></a>
      </a-tooltip>
    </div>
  </div> -->
  <a-menu mode="inline" :inline-collapsed="collapsed" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys"
    :style="{ width: collapsed ? 'auto' : '200px' }">
    <template v-for="item in options" :key="item.key">
      <template v-if="!item.hide">
        <a-menu-item v-if="item.children.length === 0" :key="item.key">
          <template #icon>
            <Icon :icon="item.icon"></Icon>
          </template>
          <span>{{ item.label }}</span>
        </a-menu-item>
        <a-sub-menu key="sub1" v-else>
          <template #icon>
            <Icon :icon="item.icon"></Icon>
          </template>
          <template #title>{{ item.label }}</template>
          <template v-for="sub in item.children" :key="sub.key">
            <a-menu-item>
              <Icon :icon="sub.icon"></Icon>
              {{ sub.label }}
            </a-menu-item>
          </template>
        </a-sub-menu>
      </template>
    </template>
  </a-menu>
  <div class="sidebar-btn" @click="collapsed = !collapsed">
    <MenuUnfoldOutlined v-if="collapsed" />
    <MenuFoldOutlined v-else />
  </div>
</template>

<script lang="ts" setup>
import { createVNode, defineComponent, ref } from 'vue'
import * as icons from '@ant-design/icons-vue'
import { ERouterName } from '/@/types'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'

const openKeys = ref([])
const selectedKeys = ref([])
const collapsed = ref(false)

const Icon = (props: { icon: string }) => {
  return createVNode((icons as any)[props.icon])
}
const options = [
  {
    key: 0,
    label: '首页',
    path: '/' + ERouterName.TSA,
    icon: 'TeamOutlined',
    children: [],
    hide: false
  },
  { key: 1, label: 'Livestream', path: '/' + ERouterName.LIVESTREAM, icon: 'VideoCameraOutlined', children: [], hide: true },
  { key: 2, label: 'Annotations', path: '/' + ERouterName.LAYER, icon: 'EnvironmentOutlined', children: [], hide: true },
  { key: 3, label: '媒体文件', path: '/' + ERouterName.MEDIA, icon: 'PictureOutlined', children: [], hide: false },
  { key: 4, label: '航线管理', path: '/' + ERouterName.WAYLINE, icon: 'NodeIndexOutlined', children: [], hide: false },
  { key: 5, label: '任务管理', path: '/' + ERouterName.TASK, icon: 'CalendarOutlined', children: [], hide: false },
  { key: 6, label: 'Flight Area', path: '/' + ERouterName.FLIGHT_AREA, icon: 'GroupOutlined', children: [], hide: true },
  { key: 7, label: '系统管理', path: '/' + ERouterName.FLIGHT_AREA, icon: 'GroupOutlined', children: [{ key: '7-1', label: '用户管理', path: '/' + ERouterName.FLIGHT_AREA, icon: 'TeamOutlined', children: [], hide: false }], hide: false },
]

</script>

<style scoped lang="scss">
.ant-tooltip-open {
  border: 0;
}

.sidebar-btn {
  position: absolute;
  bottom: 0;
  left: 30px;
  font-size: 18px;
  opacity: .4;
  cursor: pointer;

  &:hover {
    color: rgb(0, 102, 255);
    opacity: 1;
  }
}
</style>
